<template>
	<view class="poster-tools">
		<view class="poster-tools-wrap">
			<view v-for="(item,i) in list" :key="i" :class="{'p-t-btn': true,  'btn-disable': item.disable }" @click="onClick(item)">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
    import { accAdd, Subtr } from '@/utils/number'
	export default {
		name: 'mo-poster-tools',
		props: {
			width:{
				type: Number,
				default:320
			},
			height:{
				type: Number,
				default:400
			},
            zoomIn:{
				type: [Number, String],
				default: 1
			},
            rotateIn:{
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
                rotate: 0,
                zoom: 1,
				list: [
                    { disable: true, visible: true, name: '放大'  },
                    { disable: false, visible: true, name: '缩小'  },
                    { disable: false, visible: true, name: '左旋转' },
                    { disable: false, visible: true, name: '右旋转' },
                    { disable: false, visible: true, name: '定位' },
                ],
				addHeight: false,
				ipad: false,
				originImg: {}, //存放原图信息
			};
		},
		watch: {
            zoomIn: {
				deep: true,
				immediate: true,
				handler(newVal) {
					this.$nextTick(() => {
                        this.zoom = newVal
                        this.setList()
					})
				}

            },
            rotateIn: {
				deep: true,
				immediate: true,
				handler(newVal) {
					this.$nextTick(() => {
                        this.rotate = newVal
					})
				}

            }
		},
        mounted(){
            this.onClick()
        },
		methods: {
			onClick(item) {
                if(item && item.disable)  return
                if (item && item.name) {
                    switch(item.name) {
                        case '放大':
                            this.zoom = accAdd(this.zoom, 0.2)
                            break;
                        case '缩小':
                            this.zoom = Subtr(this.zoom, 0.2)
                            break;
                        case '左旋转':
                            this.rotate = Subtr(this.rotate, 90)
                            break;
                        case '右旋转':
                            this.rotate = accAdd(this.rotate, 90)
                            break;
                        case '定位':
                            break;
                    }
                }
                console.log(78, this.zoom)
                this.rotate = (this.rotate >= 360 || this.rotate <= -360) ? 0 : this.rotate
                this.setList()
                this.$emit('active', { ...item, rotate: this.rotate, zoom: this.zoom })
			},
            setList() {
                this.list[0].disable = this.zoom >= 4
                this.list[1].disable = this.zoom <= 0.3
            }
		}
	}
</script>

<style lang="scss" scoped>
	.poster-tools {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
        background: #fff;
        padding:10rpx 0;
        font-size: 24rpx;
        &-wrap{
            display: flex;
            align-items: center;
        }
        .p-t-btn{
            color: #f40;
            margin: 0 10rpx;
            border: 1rpx solid #f40;
            border-radius: 20px;
            padding: 0 20rpx;
            line-height: 40rpx;
            white-space: nowrap;
            &.btn-disable{
                color: rgba(255, 68, 0, .5);
                border-color: rgba(255, 68, 0, .5);
            }
        }
        .p-t-num{
            color: #333;
            font-size: 24rpx;
            width: 60rpx;
            border: 1rpx solid #999;
            border-radius: 20px;
            padding: 0 20rpx;
            line-height: 40rpx;
        }
	}
</style>
